<template>
	<view>
		<view class="bgs" :style="{width:windowWidth+'px',height:windowHeight+'px',paddingTop:CustomBar+'px'}">
			<view class="white p-l-15">
				<view class="f-24 fontBold">
					<!-- 手机号登录/注册 -->
					微信自动登录
				</view>
				<!-- <view class="m-t-3">
					输入手机号、验证码进行绑定并注册登录
				</view> -->
			</view>
			<!-- <view class="flex justify-center align-center m-t-10" v-if="logo">
				<image :src="logo" class="logo"></image>
			</view>
			<view class="flex justify-center align-center m-t-10 f-16" v-if="logoname">
				{{logoname}}
			</view> -->
			<view class="log-box">
				<view class="p-l-10 p-r-10">
					<view class="input-box flex align-center m-b-30">
						<view class="flex m-r-15">
							<image src="/static/img/user.png" class="icon"></image>
						</view>
						<input type="number" placeholder="请输入11位手机号码" v-model="postData.phone" class="inputs"
							placeholder-class="inputs-place" />
					</view>
					<view class="input-box flex align-center">
						<view class="flex m-r-15">
							<image src="/static/img/password.png" class="icon"></image>
						</view>
						<input type="number" placeholder="请输入验证码" v-model="postData.code" class="inputs"
							placeholder-class="inputs-place" maxlength="4"/>
						<view v-if="show" :disabled="CodeLoading" @click="getCode" class="code">获取验证码</view>
						<view v-else class="code">{{count}} s</view>
					</view>
				</view>
				<view class="log-btn flex justify-center align-center" @tap="logon">
					注册并登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 650,
				windowWidth: 375,
				count: 0,
				CodeLoading: false,
				show: true,
				StatusBar: this.StatusBar,
				CustomBar:this.CustomBar,
				postData: {
					phone: '',
					code: ''
				},
				seled: true,
				timer: null,
				wxnum: '',
				wx_nickname: '',
				wx_avatar_url: '',
				logo:'',
				logoname:'',
				pid:''
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			let code = this.getUrlCode();
			let shareId = this.getUrlNum();
			if(shareId){
				// this.getNumInfo(num);
				this.$store.state.shareId = shareId;
			}
			if (code) {
				this.setOpenId(code);
			} else {
				this.getWxLogin();
			}
		},
		methods: {

			changeSel() {
				this.seled = !this.seled;
			},
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			getWxLogin() {
				let currentPath = window.location.href;
				let url = currentPath;
				let shareId = this.$store.state.shareId;
				if(shareId){
					let hasExistingParams = currentPath.includes('?');
					url = hasExistingParams
					  ? `${currentPath}&shareId=${shareId}`  // 已有参数，用 & 追加
					  : `${currentPath}?shareId=${shareId}`; 
				}
				const redirectUri = encodeURIComponent(url);
				let str = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx873edade11749cec&redirect_uri=' +
					redirectUri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
				if (this.isWeixin()) window.location.href = str
			},
			getUrlCode() {
				var url = new URL(window.location.href);
				var searchParams = url.searchParams;
				console.log('code=',searchParams.get('code'))
				return searchParams.get('code');
			},
			getUrlNum() {
				console.log(111)
				var url = new URL(window.location.href);
				var searchParams = url.searchParams;
				
				console.log('shareId=',searchParams.get('shareId'))
				return searchParams.get('shareId');
			},
			getNumInfo(num){
				this.$http(`/shop/system/company/${num}`, {},'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						uni.setStorageSync('logoData',datas);
						this.logo = datas.logo;
						this.logoname = datas.name;
					}
				})
			},
			setOpenId(code) {
				let data = {
					code
				}
				this.$http('/apicloud/Auth/weChatLogin', data).then(res => {
					console.log('setOpenId=',res)
					if (res.code == 200) {
						if (res.data.info) {
							let token = res.data.info.token;
							uni.setStorageSync('token', token);
							let shareId = this.$store.state.shareId;
							setTimeout(() => {
								if(shareId){
									uni.reLaunch({
										url:'/pages/operate/inviteShow?id='+shareId
									})
								}else{
									uni.switchTab({
										url: '/pages/tabbar/index'
									})
								}
							}, 200)
						} else {
							this.wxnum = res.data.wxnum;
							this.wx_nickname= res.data.wx_nickname;
							this.wx_avatar_url= res.data.wx_avatar_url;
						}
					}
				})
			},
			getCode() {
				const _this = this
				if (_this.postData.phone !== '') { // 1.首先判断是否未输入手机号码就点击获取验证码
					if (/^1[3456789]\d{9}$/.test(this.postData.phone)) { //2.使用正则判断手机输入的验证码是否符合规范
						_this.CodeLoading = true
						_this.$http('/apicloud/Auth/sendCode', {
								phone: this.postData.phone
							}).then((res) => {
								_this.CodeLoading = false
								if (res.code !== 200) {
									uni.showToast({
										title: res.mess ? res.mess : '获取失败,请重试',
										icon: 'none'
									})
									return
								}
								const TIME_COUNT = 60; // 3.设置时间为60s
								if (!_this.timer) {
									_this.count = TIME_COUNT;
									_this.show = false; // 4.隐藏获取验证码按钮,展示倒计时模块
									// this.getPhoneCode() // 5.调用后端获取验证码接口的函数
									_this.timer = setInterval(() => {
										if (_this.count > 0 && _this.count <=
											TIME_COUNT) { // 6.设置每秒钟递减
											_this.count--;
										} else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
											_this.show = true;
											clearInterval(_this.timer);
											_this.timer = null;
										}
									}, 1000)
								}
							})
							.catch(() => {
								_this.CodeLoading = false
							})

					} else {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
			},
			logon() {
				// uni.switchTab({
				// 	url: '/pages/tabbar/index'
				// })
				// return;
				if (this.postData.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (this.postData.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return;
				}
				let data = {
					phone: this.postData.phone,
					code: this.postData.code,
					wxnum: this.wxnum,
					wx_nickname: this.wx_nickname,
					wx_avatar_url: this.wx_avatar_url,
					pid:this.pid
				}
				this.$http('/apicloud/Auth/login', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						let token = res.data.token;
						uni.setStorageSync('token', token);
						let shareId = this.$store.state.shareId;
						setTimeout(() => {
							if(shareId){
								uni.reLaunch({
									url:'/pages/operate/inviteShow?id='+shareId
								})
							}else{
								uni.switchTab({
									url: '/pages/tabbar/index'
								})
							}
						}, 800)
					} else {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.input-box {
		position: relative;
		background: rgba(255,255,255,0.76);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.09);
		border-radius: 25px;
		.code {
			min-width: 200rpx;
			text-align: center;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 5;
			font-size: 28rpx;
			padding: 10rpx;
			border-radius: 30px;
			background: #FFCB00;
			color: #ffffff;
		}
	}

	.bgs {
		background-image: url('@/static/img/log-bg.png');
		background-size: 100% 100%;
		padding: 30rpx;
		position: relative;
	}

	.log-top {
		width: 520rpx;
		height: 350rpx;
	}

	.log-box {
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		// margin-top: -40rpx;
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		left: 0;
	}

	.input-box {
		padding: 30rpx 0 30rpx 30rpx;
		.icon{
			width: 24rpx;
			height: 28rpx;
			flex: none;
		}
		.inputs-place {
			color: #000000;
			font-weight: bold;
		}

		.inputs {
			color: #000000;
			font-weight: bold;
		}
	}

	.sel {
		width: 36rpx;
		height: 36rpx;
	}

	.log-btn {
		height: 90rpx;
		background: #FF5200;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 44rpx;
		margin-top: 120rpx;
	}
	.logo{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>